<template>
    <div class="shopDetail">
        <p class="back">
            <i class="van-icon van-icon-arrow-left" @click="$router.go(-1)" />
        </p>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in list.pics2" :key="index">
                <img :src="item" />
            </van-swipe-item>
        </van-swipe>
        <div class="detail">
            <p v-html="detail.name"></p>
            <p class="adress">{{detail.characteristic}}</p>
            <div class="flex">
                <p>
                    {{detail.recommendStatusStr}}
                    <span>￥1</span>
                </p>
                <p>原价{{detail.originalPrice}}</p>
                <p>库存{{detail.stores}}</p>
            </div>
        </div>
        <div class="content">
            <van-tabs v-model="active" line-width="100px">
                <van-tab title="商品详情">
                    <div v-html="list.content"></div>
                </van-tab>
                <van-tab title="商品评价">
                    <van-card
                        v-for="item in Reputation"
                        :key="item.id"
                        :desc="item.goods.goodReputationRemark"
                        :title="item.user.nick"
                    >
                        <template #thumb>
                            <i class="van-icon van-icon-user-circle-o"></i>
                        </template>
                        <template #footer>{{ item.goods.dateReputation }}</template>
                    </van-card>
                </van-tab>
            </van-tabs>
        </div>
        <div class="footer" @click='gotoFriendHelp'>立即发起砍价，最低砍至一元</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: {},
            detail: {},
            active: 0,
            Reputation: [],
        };
    },
    methods: {
        gotoFriendHelp(){
            this.$router.push({path:this.$path.FriendHelp,query:{list:this.list}})

        }
    },
    mounted() {
        let id = this.$route.query.id;
        this.$API.getShopDetail({ params: { id: id } }).then((res) => {
            console.log(res.data.data);
            this.list = res.data.data;
            this.detail = res.data.data.basicInfo;
        });
        this.$API.getShopReputation({ params: { goodsId: id } }).then((res) => {
            // console.log(res.data.data);
            this.Reputation = res.data.data;
        });
    },
};
</script>
<style lang="scss">
.shopDetail {
    .back {
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        border: 0.4vw solid white;
        text-align: center;
        line-height: 9vw;
        position: fixed;
        z-index: 999;
        i {
            width: 6vw;
            height: 6vw;
            border-radius: 50%;
            background-color: white;
            color: black;
            display: inline-block;
            line-height: 6vw;
            text-align: center;
        }
    }
    .my-swipe .van-swipe-item {
        height: 50vh;
        color: #fff;
        font-size: 20px;
        text-align: center;
        background-color: #39a9ed;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .detail {
        width: 100%;
        height: 18vh;
        text-indent: 5vw;
        .adress {
            font-size: 12px;
            color: gray;
            margin: 3vh 0;
        }
        .flex {
            display: flex;
            height: 5vh;
            justify-content: space-around;
            align-items: center;
        }
    }
    .content {
        width: 100% !important;
        height: auto;
        li {
            margin-left: 3vw;
            height: 5vh;
            line-height: 5vh;
        }
        img {
            width: 100% !important;
            height: 100% !important;
        }
        .van-icon-user-circle-o{
            font-size: 40px;
        }
    }
    .footer {
        width: 100%;
        height: 6vh;
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: #af262a;
        color: white;
        line-height: 6vh;
        text-align: center;
    }
}
</style>